<template>
  <div class="body c-333">
    <nut-navbar @on-click-back="$router.back()" :rightShow="false">订单详情</nut-navbar>
    <div class="container">
      <nut-tab class="tab row f-s-14">
        <nut-tab-panel tabTitle="全部订单">
          <OrderList :list="list1" @getData="getData" @updateData="updateData"></OrderList>
        </nut-tab-panel>
        <nut-tab-panel tabTitle="待支付">
          <OrderList :list="list2" @getData="getData" @updateData="updateData"></OrderList>
        </nut-tab-panel>
        <nut-tab-panel tabTitle="待报到">
          <OrderList :list="list3"></OrderList>
        </nut-tab-panel>
        <nut-tab-panel tabTitle="已报到">
          <OrderList :list="list4"></OrderList>
        </nut-tab-panel>
      </nut-tab>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getOrderListApi } from '../../api/orderList'
  import OrderList from '../../components/groupBuying/OrderList'
  import { IconUrl } from '../../utils/auxiliary'

  export default {
    data () {
      return {
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        list5: [],

        orderId:""
      }
    },
    computed: {
      ...mapGetters([ 'userInfo' ]),
      
    },
    components: { OrderList },
    mounted () {
      this.orderId = this.$route.query.orderId
      this.getData()
    },
    methods: {
      async getData () {
       
        
        const params1 = { id: this.userInfo.userId, orderId:this.orderId}
        
        const params2 = { id: this.userInfo.userId, state: '1S' }
        const params3 = { id: this.userInfo.userId, state: '1P' }
        const params4 = { id: this.userInfo.userId, state: '1F' }
        
        const [list1, list2, list3, list4] = await Promise.all([
          getOrderListApi(params1),
          getOrderListApi(params2),
          getOrderListApi(params3),
          getOrderListApi(params4)
        ])
        this.list1 = list1.map(v => {
          return Object.assign({}, v, { show: false, icon: v.activity_icon ? IconUrl(v.activity_icon) : '' })
        })
        this.list2 = list2.map(v => {
          return Object.assign({}, v, { show: false, icon: v.activity_icon ? IconUrl(v.activity_icon) : '' })
        })
        this.list3 = list3.map(v => {
          return Object.assign({}, v, { show: false, icon: v.activity_icon ? IconUrl(v.activity_icon) : '' })
        })
        this.list4 = list4.map(v => {
          return Object.assign({}, v, { show: false, icon: v.activity_icon ? IconUrl(v.activity_icon) : '' })
        })
      },
      async updateData () {
        const params1 = { id: this.userInfo.userId }
        const params2 = { id: this.userInfo.userId, state: '1S' }
        const [list1, list2] = await Promise.all([
          getOrderListApi(params1),
          getOrderListApi(params2)
        ])
        this.list1 = list1.map(v => {
          return Object.assign({}, v, { show: false })
        })
        this.list2 = list2.map(v => {
          return Object.assign({}, v, { show: false })
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .tab {
    >>> .nut-tab {
      border: none;
      background: none;
      padding: 0;
    }
    >>> .nut-tab-item {
      height: auto;
      border: none;
      background: #F9F9F9;
      padding: 15px;
      position: fixed;
      bottom: 0;
      top: 90px;
      overflow: auto;
    }
    @media screen and (min-width: 900px) {
      >>> .nut-tab-item {
        max-width: 400px;
      }
    }
    .list {
      .item {
        border-radius: 5px;
        overflow: hidden;
        background: #ffffff;
        .top {
          padding: 10px;
          box-sizing: border-box;
          background: #1B1B1B;
          .left {
            .icon {
              width: 30px;
              height: 30px;
            }
          }
        }
        .info {
          padding: 0 15px;
          box-sizing: border-box;
          .line {
            .text {
              flex-grow: 1;
              .name {
                max-width: 40%;
              }
            }
          }
        }
        .price {
          padding: 0 15px;
          box-sizing: border-box;
          .number {
            color: #B29462;
          }
          .right {
            .btn {
              width: 60px;
            }
            .bg-grey {
              background: #BFBFBF;
            }
            .bg-orange {
              background: #B29462;
            }
          }
        }
      }
    }
  }
</style>
